<template>
  <page-header-wrapper>
    <div
      style="margin-bottom: 10px;margin-top: -10px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
      <a-button @click='returnBack'>返回</a-button>
      <a-button type="dashed" primary>{{getpaystatus(info.prescription.paystatus)}}</a-button>
    </div>
    <a-card :bordered="false" v-if="info!=''">
      <a-descriptions bordered title="患者信息" size=' small'>
        <a-descriptions-item label="姓名">{{info.prescription.name}}</a-descriptions-item>
        <a-descriptions-item label="性别">{{info.user.sex=='1'?'男':'女'}}</a-descriptions-item>
        <a-descriptions-item label="年龄">{{info.prescription.age}}岁</a-descriptions-item>
        <a-descriptions-item label="地址">{{info.user.province}}{{info.user.city}}{{info.user.county}}
        </a-descriptions-item>
        <a-descriptions-item label="身高(单位：cm)">{{info.user.height}}</a-descriptions-item>
        <a-descriptions-item label="体重(单位：kg)">{{info.user.weight}}</a-descriptions-item>
        <a-descriptions-item :span='3' label="既往病史">
          <div class="columnbox">
            <div>{{bingshi.span}}</div>
            <div>
              <img style="width:100px;height:100px;margin-right:20px" @click='previewImg(item)'
                v-for="(item,index) in bingshi.img" :key='index' :src='item' />
            </div>
          </div>
        </a-descriptions-item>
        <a-descriptions-item :span='3' label="过敏史">
          <div class="columnbox">
            <div>{{guomin.span}}</div>
            <div>
              <img style="width:100px;height:100px;margin-right:20px" @click='previewImg(item)'
                v-for="(item,index) in guomin.img" :key='index' :src='item' />
            </div>
          </div>
        </a-descriptions-item>
      </a-descriptions>

      <a-descriptions style='margin-top: 40px;' bordered title="开方信息" size='small'>
        <a-descriptions-item label="辨病">{{info.prescription.bianbing}}</a-descriptions-item>
        <a-descriptions-item label="辩症">{{info.prescription.bianzheng}}</a-descriptions-item>
        <a-descriptions-item label="剂型">{{info.prescription.jixing}}</a-descriptions-item>
        <a-descriptions-item label="医嘱提醒">{{info.prescription.title}}</a-descriptions-item>
        <template v-if="info.prescription.typ==1">
          <a-descriptions-item label="用法">
            {{info.prescription.state==1?'内服':'外用'}}；
            共{{info.prescription.ji}}剂；
            共服{{info.prescription.day}}日；
            每日分{{info.prescription.ci}}次服用
          </a-descriptions-item>
        </template>
        <template v-else>
          <a-descriptions-item label="用法">
            {{info.prescription.state==1?'内服':'外用'}}；
            共{{info.prescription.ji}}剂；
            每日{{info.prescription.day}}剂；
            1剂分{{info.prescription.ci}}次服用
          </a-descriptions-item>
        </template>
        <a-descriptions-item label="是否复诊"
          v-if="info.prescription.ziti==1">{{info.prescription.fuzhen==1?'复诊':'不复诊'}}</a-descriptions-item>
        <a-descriptions-item label="复诊日期">
          {{info.prescription.fuzhendate==0?'-': new Date(info.prescription.fuzhendate * 1000).toLocaleString() }}
        </a-descriptions-item>
        <a-descriptions-item label="配送方式">{{info.prescription.ziti==1?'快递':'自提'}}</a-descriptions-item>
        <a-descriptions-item label="诊金">¥{{info.prescription.zhenjin}}</a-descriptions-item>
        <a-descriptions-item label="总价">¥{{info.prescription.price}}</a-descriptions-item>
      </a-descriptions>

      <a-descriptions bordered v-if="info.prescription.ziti==1" title="收货地址" size='small' style='margin-top: 40px;'>
        <a-descriptions-item label="姓名">{{info.address.name}}</a-descriptions-item>
        <a-descriptions-item label="性别">{{info.address.phone}}</a-descriptions-item>
        <a-descriptions-item label="地址">{{info.address.province}}{{info.address.city}}{{info.address.county}}
          {{info.address.area}}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions style='margin-top: 40px;' bordered title="药方" size='small'>
      </a-descriptions>
      <a-table :pagination="pagination" :scroll="{ x: true }" ref="table" bordered :dataSource="info.prescriptiondrug"
        :columns="columns" :rowKey="(record,index)=> index">
        <!--          <img @click="previewImg(record.qianming)" class="banner-img" slot-scope="span, record" :src="span"
         slot="qianming" /> -->
        <div slot="price" slot-scope="span, record">
          ¥{{span}}
        </div>
      </a-table>
      <a-descriptions style='margin-top: 40px;' bordered title="处方信息" size='small'>
      </a-descriptions>
      <div class="wdh-100" style="margin-top: 20px;">
        <a-button @click='saveYaofang'>保存图片</a-button>
      </div>
      <img style="margin-top: 10px;" :src="yaofangUrl" />
      <div class="cf-box" ref="canvasImg" style="position: fixed;left: -2000px;">
        <div class="columnbox info-box">
          <div class="i-title">·辩证·</div>
          <div class="wdh-100 bz-box">
            【患者信息】{{info.prescription.name}} {{info.prescription.sex=='2'?'女':'男'}}
            {{info.prescription.age}}岁
          </div>
          <div class="wdh-100 bz-box">
            【诊断】{{info.prescription.bianbing}}
          </div>
        </div>
        <div class="columnbox info-box" style="position: relative;">
          <div class="i-title">·开方·</div>
          <div class="wdh-100 bz-box jixing-box">
            {{info.prescription.jixing}}
          </div>
          <div class="wdh-100 bz-box" style="font-size: 20px;">
            Rp：
          </div>
          <div class="wdh-100 bz-box jixing-box">
            <div class="wdh-100 prescriptiondrug-list">
              <div style="margin-right: 20px;" v-for="(item,index) in info.prescriptiondrug" :key='index'>
                {{item.chinesedrug}} * {{item.gram}}g
              </div>
            </div>
          </div>
          <div class="wdh-100 bz-box  yl-box">
            【用量】共 <span>{{info.prescription.ji}}</span> 剂，
            共服 <span>{{info.prescription.day}}</span> 日，
            每日分<span>{{info.prescription.ci}}</span> 次服用，
          </div>
          <div class="wdh-100 bz-box  yl-box">
            医师：<img style="width: 200px;" :src="info.prescription.qianming" />
          </div>
        </div>
        <img class="seal-img" src="@/assets/icons/seal.jpg" />
      </div>

    </a-card>
    <imgBox ref='preimg'></imgBox>
  </page-header-wrapper>
</template>

<script>
  import html2canvas from 'html2canvas';
  import {
    zhongyaoOrderDetail
  } from '@/api/orderManage'
  import imgBox from '@/components/previewImg/index'
  export default {
    components: {
      imgBox
    },
    data() {
      return {
        yaofangUrl: '',
        bingshi: {
          span: '',
          img: []
        },
        guomin: {
          span: '',
          img: []
        },
        id: 0,
        info: '',
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        columns: [{
            title: '名称',
            dataIndex: 'chinesedrug',
            key: 'chinesedrug',
          },
          {
            title: '重量（g）',
            dataIndex: 'gram',
            key: 'gram',
          },
          {
            title: '价格（元）',
            dataIndex: 'price',
            key: 'price',
          }
        ]
      }
    },
    created() {
      this.id = this.$route.query.id * 1
      this.getDetail()
    },
    methods: {
      saveYaofang() {
        var currentTime = new Date();
        var y = currentTime.getFullYear()
        var m = currentTime.getMonth() + 1
        let d = currentTime.getDate()

        const blob = this.base64ToBlob(this.yaofangUrl)
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = this.info.prescription.name + '-' + y + '-' + m + '-' + d
        document.body.appendChild(link)
        link.click()

        // 清理
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
      },

      base64ToBlob(dataurl) {
        var arr = dataurl.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var bstr = atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], {
          type: mime
        })
      },

      createImage() {
        const element = this.$refs.canvasImg; // 获取需要生成图片的DOM元素
        html2canvas(element).then((canvas) => {
          this.yaofangUrl = canvas.toDataURL('image/png');
        })
      },
      previewImg(img) {
        this.$refs.preimg.initData(img)
      },
      getpaystatus(v) {
        switch (v) {
          case 0:
            return '全部'
            break;
          case 1:
            return '待付款'
            break;
          case 2:
            return '已付款'
            break;
          case 3:
            return '待收货'
            break;
          default:
            return '已完成'
            break
        }
      },
      returnBack() {
        this.$router.go(-1)
      },
      getDetail() {
        zhongyaoOrderDetail({
          id: this.id
        }).then(res => {
          this.info = res.data
          let bingshi = JSON.parse(res.data.user.bingshi)
          this.bingshi = {
            span: bingshi.span,
            img: bingshi.img == '' ? [] : bingshi.img.split(',')
          }
          let guomin = JSON.parse(res.data.user.guomin)
          this.guomin = {
            span: guomin.span,
            img: guomin.img == '' ? [] : guomin.img.split(',')
          }
          this.pagination.total = res.data.prescriptiondrug.length
          setTimeout(() => {
            this.$nextTick(() => {
              this.createImage()
            })
          }, 1000)
        })
      }
    }
  }
</script>

<style scoped>
  .cf-box {
    border: #e5e7ed solid 1px;
    margin-top: 10px;
    position: relative;
    width: 500px;
  }

  .info-box {

    background: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 32px 32px;
    width: 100%;
  }

  .i-title {
    font-weight: bold;
  }

  .bz-box {
    margin-top: 20px;
  }

  .jixing-box {
    border-bottom: #b2b4b7 dotted 1px;
    padding-bottom: 20px;
  }

  .prescriptiondrug-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    line-height: 50px;
  }

  .prescriptiondrug-list view {
    margin-right: 32px;
  }

  .yl-box span {
    color: #f17267;
    margin: 0 10px;
  }

  .seal-img {
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 40px;
    z-index: 2;
    right: 40px
  }
</style>